<template>
  <el-card class="box-card">
    <!-- mianbaoxue-->
     <my-bread level1="用户管理" level2="用户列表" ></my-bread>
    <!-- sousuokuang -->
    <el-row style="margin-top: 20px;">
      <el-col>
        <el-input @clear="queryUserList()" clearable style="width:300px" placeholder="请输入内容" v-model="query" class="input-with-select">
          <el-button @click.prevent="queryUser()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button @click.prevent="showAddUserDialog()" type="success">添加用户</el-button>
      </el-col>
    </el-row>
    <!-- table-->
    <el-table :data="userList" style="width: 100%">
      <el-table-column type="index" prop="id" label="id" width="60">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
      </el-table-column>
      <el-table-column prop="mobile" label="电话">
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="userList">
          {{userList.row.create_time|fmtDate}}

        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="用户状态">
        <template slot-scope="scope">
          <el-switch @change="changeStatus(scope.row)" v-model="scope.row.mg_state" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="操作">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="dialogFormVisibleEditShow(scope.row)" icon="el-icon-edit"></el-button>
          <el-button plain size="mini" @click="showDeleteDialog(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
          <el-button plain size="mini" type="success" @click="showGiveRoleDialog(scope.row)" icon="el-icon-check"
            circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
      :page-sizes="[4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- diolage add-->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="用户名称" label-width="100px">
          <el-input v-model="form.username" autocomplete="true"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="100px">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd=false">取 消</el-button>
        <el-button type="primary" @click.prevent="addUser()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- diolage edit-->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="form">
        <el-form-item label="用户名称" label-width="100px">
          <el-input disabled v-model="form.username" autocomplete="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="100px">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit=false">取 消</el-button>
        <el-button type="primary" @click.prevent="editUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!--分配角色 -->
    <el-dialog title="分配角色" :visible.sync="dialogFormVisibleRol">
      <el-form :model="form">
        <el-form-item label="用户名称" label-width="100px">
          {{currentUserName}}
        </el-form-item>
        <el-form-item label="角色" label-width="100px">
          <el-select v-model="currentRoleId">
            <el-option label="请选择" :value="-1"></el-option>
            <el-option v-for="(item,i) in roleItem" :key="i" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRol=false">取 消</el-button>
        <el-button type="primary" @click.prevent="giveUserRole()">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
export default {
  data () {
    return {
      query: '',
      pagenum: 1,
      pagesize: 4,
      userList: [],
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      dialogFormVisibleRol: false,
      currentUserName: '',
      region: -1,
      roleItem: [],
      currentRoleId: -1,
      currentUserId: -1,
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    }
  },
  created () {
    this.queryUserList()
  },
  methods: {
    async showGiveRoleDialog (user) {
      this.currentUserId = user.id
      this.currentUserName = user.username
      this.dialogFormVisibleRol = true
      const res1 = await this.$http.get('roles')
      console.log(res1)
      if (res1.data.meta.status === 200) {
        this.roleItem = res1.data.data
      }
      const res = await this.$http.get('users/' + user.id)

      const {
        data
      } = res.data
      this.currentRoleId = data.rid
    },
    async giveUserRole () {
      const res = await this.$http.put('users/' + this.currentUserId + '/role', {
        'rid': this.currentRoleId
      })
      const {
        meta: {
          status,
          msg
        }
      } = res.data
      if (status === 200) {
        this.queryUserList()
        this.$message.success(msg)
      } else {
        this.$message.warning(msg)
      }
      this.dialogFormVisibleRol = false
    },
    async changeStatus (user) {
      const res = await this.$http.put('users/' + user.id + '/state/' + user.mg_state)
      console.log(res)
      const {
        meta: {
          msg,
          status
        }
      } = res.data
      if (status === 200) {
        this.queryUserList()
        this.$message.success(msg)
      } else {
        this.$message.warning(msg)
      }
    },
    // edit start
    async editUser (userId) {
      const res = await this.$http.put('users/' + this.form.id, this.form)
      this.dialogFormVisibleEdit = false
      const {
        meta: {
          msg,
          status
        }
      } = res.data
      if (status === 200) {
        this.queryUserList()
        this.$message.success(msg)
        // this.form = {}
        for (const key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = ''
          }
        }
      } else {
        this.$message.warning(msg)
      }
    },
    dialogFormVisibleEditShow (user) {
      this.form = user
      this.dialogFormVisibleEdit = true
    },
    // add start
    showAddUserDialog () {
      this.form = {}
      this.dialogFormVisibleAdd = true
    },
    async addUser () {
      this.dialogFormVisibleAdd = false
      const res = await this.$http.post('users', this.form)
      console.log(res)
      const {
        meta: {
          msg,
          status
        }
      } = res.data
      if (status === 201) {
        this.queryUserList()
        this.$message.success(msg)
        // this.form = {}
        for (const key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = ''
          }
        }
      } else {
        this.$message.warning(msg)
      }
    },
    // add end
    // delete start
    showDeleteDialog (userId) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(userId)
        const res = await this.$http.delete('users/' + userId)
        this.queryUserList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // delete start
    queryUser () {
      this.queryUserList()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.handleCurrentChange(1)
      // this.queryUserList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.queryUserList()
    },
    async queryUserList () {
      const res = await this.$http.get('users', {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          total: -1
        }
      })
      console.log(res)
      const {
        meta: {
          msg,
          status
        },
        data: {
          pagenum,
          total,
          users
        }
      } = res.data
      if (status === 200) {
        this.userList = users
        this.total = total
        // this.$message.success(msg)
      } else {
        // this.$message.warning(msg)
      }
    }

  }
}
</script>

<style>
  .box-card {
    height: 100%
  }
</style>
